import { store } from './store';
import { createApp, provide } from 'vue'
import App from './App.vue'
import router from './router';
import "default-passive-events"
import showMessage from '@/units/message/message';
console.log(store,'>>><<<@@')
/**
 * 浏览器控制台报警告：[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. 
 * Consider marking event handler as 'passive' to make the page more responsive.
    虽然他不会直接影响项目出现报错或者无法正常运行，但是这系列警告的存在就会为以后项目运行出现未知问题埋下隐患。
   2.解决方案：
   造成上述问题的原因是：项目没有添加事件管理者’passive’，而在谷歌浏览器里面 Chrome51 版本以后，
   Chrome 增加了新的事件捕获机制Passive Event Listeners 
   （其作用为： 告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，
   以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候
   ，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，
   Chrome浏览器称这类型的监听器为被动（passive）监听器。目前Chrome主要利用该特性来优化页面的滑动性能，
   所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件。 ）。
   所以这里的解决方案是：安装default-passive-events插件

 */

const fnDo = (): void => {
  // 抽象类
  //  abstract class Animal {
  //     // 定义一个属性
  //     abstract name1: string
  //     // 定义一个构造函数
  //     constructor(name1: string = '动物') {
  //       // 更新属性值
  //       // this.name1 = name1
  //     }
  //     abstract eat()
  //     // 实例方法`
  //     run(distance: number = 0) {
  //       console.log(this.name1, `跑了${distance}米`)
  //     }
  //   }
  //   class Dog extends Animal {
  //     name1: string
  //     constructor (name1: string) {
  //       super(name1)
  //     }
  //     eat() {
  //       console.log('狗舔着吃')
  //     }
  //   }

  // 函数的完整表示方法
  // const add: (x: number, y: number,...argus:number[]) => number = (x: number, y: number,...argus) => argus.reduce((pre:number,val:number,index:number)=>{
  //   console.log('索引：',index)
  //   pre += val
  //   if(index === 1){
  //     return pre 
  //   } else {
  //     return x+ y + pre 
  //   }
  // },0);
  // console.log(typeof add(1, 9,8,6))

  // 可选参数：函数在声明的时候，内部参数使用了?进行修饰,那么就表示该参数可以传入也可以不传入，即可选参数；
  // 默认参数：函数在声明的时候，内部的参数有自己的默认值，这时该参数就叫做默认参数；
  // const getFullName = function (firstName: string = '东方',lastName?: string) {
  //   return lastName ? `${firstName}-${lastName}` : firstName
  // }
  // console.log(getFullName())  //  东方
  // console.log(getFullName('诸葛'))  // 诸葛
  // console.log(getFullName('诸葛', '孔明'))  // 诸葛-孔明

  // 存取器：可以有效地控制对 对象中的成员进行访问，通过getters和setters来进行操作；
  // class Person {
  //   firstName: string // 姓氏
  //   lastName: string // 名字
  //   constructor(firstName: string = '诸葛', lastName: string = '孔明') {
  //     this.firstName = firstName
  //     this.lastName = lastName
  //   }
  //   // 姓名的成员属性，（外部可以访问，也可以修改）


  //   // 读取器，负责读取数据的
  //   get fullName() {
  //     console.log('触发了get fullName')
  //     return this.firstName + '-' + this.lastName
  //   }
  //   // 设置器，负责设置数据的（修改）
  //   set fullName(val) {
  //     console.log('触发了set fullName')
  //     let name = val.split('-')
  //     this.firstName = name[0]
  //     this.lastName = name[1]

  //   }
  // }
  // const person = new Person()
  // person.fullName = '东方-不败' // logMsg: 触发了set fullName
  // console.log(person.fullName)  // logMsg: 触发了get fullName 东方-不败


  // function add (x:string,y:string):string
  // function add (x:number,y:number):string
  // function add (x:string,y:string,c:string):string
  // 函数重载：函数名字相同，函数的参数及个数不同
  // function add(x:string | number,y:string | number):string | number {
  //   if(typeof x === 'string' && typeof y === 'string') {
  //     return x + y
  //   } else if (typeof x === 'number' && typeof y === 'number') {
  //     return x + y
  //   }
  // }
  // console.log(add('111','555',"888"))
  // console.log(add(111,555))
  // console.log(add('111',555))
  // console.log(add(111,'555'))


  // 泛型： 在定义函数、接口、类的时候不能预先确定要使用的数据的类型，
  // 而是在使用函数、接口、类的时候才能确定数据的类型
  // function getArr<T> (value:T,count: number):T[] {
  //   // const arr: T[] = []
  //   const arr:Array<T> = []
  //   for (let i = 0; i < count; i++) {
  //      arr.push(value)
  //   }
  //   return arr
  // }
  // const arr1 = getArr<number>(9,9).at(0)
  // console.log(arr1,'>>>???333')

  // 泛型类： 类中的属性值的类型是不确定的，方法中的参数及返回值的类型也是不确定的
  class genericNumber<T> {
    defaultValue: T
    add:(x:T, y: T) => T
  }
  // 在实例化类的时候再确定泛型的类型
  const g1:genericNumber<number> = new genericNumber()
  g1.defaultValue = 100
  g1.add = (x,y)=> x+y
  console.log(g1.add(g1.defaultValue,80),'&&&&') // 180
  const g2:genericNumber<string> = new genericNumber()
  g2.defaultValue = '东方'
  g2.add = (x,y)=> `${x}-${y}`
  console.log(g2.add(g2.defaultValue,'不败'))  // 东方-不败
}
fnDo()
const app = createApp(App)
app.config.globalProperties.$showMessage = showMessage
app.use(store)
app.use(router).mount('#app')
